import {
  Card,
  Breadcrumb,
  Form,
  Button,
  Radio,
  DatePicker,
  Table,
  Space,
  Image,
  Tag,
  Modal,
  message,
} from "antd";
import { Link, useHistory } from "react-router-dom";
import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
import styles from "./index.module.scss";
import { useEffect, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getArticles, delArticle } from "@/store/actions";
import defaultImg from "@/assets/error.png";
import Channel from "@/components/Channel";

// 状态常量数据
const statusLabel = [
  { label: "草稿", color: "default" },
  { label: "待审核", color: "blue" },
  { label: "已通过", color: "green" },
  { label: "已拒绝", color: "red" },
];

const Article = () => {
  const dispatch = useDispatch();
  // 频道相关逻辑
  // useEffect(() => {
  //   dispatch(getChannels());
  // }, [dispatch]);
  // const { channels } = useSelector((state) => state.article);

  // 文章列表相关逻辑
  useEffect(() => {
    dispatch(getArticles(params.current));
  }, [dispatch]);
  const { results, page, per_page, total_count } = useSelector(
    (state) => state.article
  );

  // 1. 使用普通变量 const params = {page:1,per_page:10}
  //    会在组件渲染的时候回到初始值，不能记住筛选参数
  // 2. 使用状态变量 const [params,setParams] = useState({})
  //    现在使用的筛选参数并没有用于页面渲染，只有setParams来记住参数的时候导致组件渲染
  //    setParams({}) 更新值，组件渲染完成后才生效数据，params才是改变后的值
  //    我们是需要在数据更新后，去使用这个数据的，dispatch(getArticles(params)) 拿不到更新后的params
  //    this.setState({},()=>{}) 但是  useState() 提供的 setXxx() 是没有第二个参数
  // 3. 使用useRef除了可以获取dom元素和获取子组件函数等功能，在组件中还可以记录数据
  //    使用它记录的数据：组件渲染不会导致它的数据初始化，它的数据的变化也不会去渲染组件
  const params = useRef({
    status: undefined,
    channel_id: undefined,
    begin_pubdate: undefined,
    end_pubdate: undefined,
    page: 1,
    per_page: 20,
  });
  // params.current 使用数据和修改数据

  // 筛选相关逻辑
  const onFinish = (values) => {
    // 对筛选参数进行处理
    params.current.status = values.status;
    params.current.channel_id = values.channel_id;
    if (values.dateArr) {
      // 日期数据默认是moment对象
      params.current.begin_pubdate = values.dateArr[0].format(
        "YYYY-MM-DD HH:mm:ss"
      );
      params.current.end_pubdate = values.dateArr[1].format(
        "YYYY-MM-DD HH:mm:ss"
      );
    } else {
      params.current.begin_pubdate = undefined;
      params.current.end_pubdate = undefined;
    }
    // 需要回到第一页
    params.current.page = 1;
    // 分发action发请求更新数据
    dispatch(getArticles(params.current));
  };

  // 分页逻辑
  const onPageChange = (page, pageSize) => {
    // 准备分页参数
    params.current.page = page;
    params.current.per_page = pageSize;
    // 分发action发请求更新数据
    dispatch(getArticles(params.current));
  };

  // 删除文章逻辑
  const handleDelete = (id) => {
    // 确认框
    Modal.confirm({
      title: "您确认删除该篇文章吗？",
      onOk: async () => {
        // 删除
        await dispatch(delArticle(id));
        // 更新列表数据
        await dispatch(getArticles(params.current));
        // 提示
        message.success("删除成功");
      },
    });
  };

  // 去编辑页
  const history = useHistory()
  const handleEdit = (id) => {
    history.push(`/publish/${id}`)
  }

  // 列配置
  const columns = [
    {
      title: "封面",
      dataIndex: "cover",
      render: (cover) => {
        return (
          <Image
            width={200}
            height={150}
            style={{ objectFit: "cover" }}
            src={cover?.images?.[0] || defaultImg}
          />
        );
      },
    },
    {
      title: "标题",
      dataIndex: "title",
    },
    {
      title: "状态",
      dataIndex: "status",
      render: (status) => {
        const info = statusLabel[status];
        return <Tag color={info.color}>{info.label}</Tag>;
      },
    },
    {
      title: "发布时间",
      dataIndex: "pubdate",
    },
    {
      title: "阅读数",
      dataIndex: "read_count",
    },
    {
      title: "评论数",
      dataIndex: "comment_count",
    },
    {
      title: "点赞数",
      dataIndex: "like_count",
    },
    {
      title: "操作",
      dataIndex: "action",
      render: (text, record) => (
        <Space size="middle">
          <Button
            onClick={() => handleEdit(record.id)}
            type="link"
            icon={<EditOutlined />}
          />
          <Button
            onClick={() => handleDelete(record.id)}
            type="link"
            icon={<DeleteOutlined />}
          />
        </Space>
      ),
    },
  ];
  return (
    <div className={styles.root}>
      {/* 筛选区域 */}
      <Card
        title={
          <Breadcrumb>
            <Breadcrumb.Item>
              <Link to="/">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>内容管理</Breadcrumb.Item>
          </Breadcrumb>
        }
      >
        {/* 表单 */}
        <Form onFinish={onFinish}>
          <Form.Item label="状态：" name="status">
            <Radio.Group>
              {/* 表单的默认值就是undefined默认选中全部 */}
              <Radio value={undefined}>全部</Radio>
              <Radio value={0}>草稿</Radio>
              <Radio value={1}>待审核</Radio>
              <Radio value={2}>已通过</Radio>
              <Radio value={3}>已拒绝</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="频道：" name="channel_id">
            <Channel width={288} />
          </Form.Item>
          <Form.Item label="日期：" name="dateArr">
            {/* 收集的数据数组 [begin,end] */}
            <DatePicker.RangePicker />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              筛选
            </Button>
          </Form.Item>
        </Form>
      </Card>
      {/* 结果区域 */}
      <Card
        title={`根据筛选条件共查询到 ${total_count} 条结果：`}
        style={{ marginTop: 24 }}
      >
        <Table
          columns={columns}
          dataSource={results}
          rowKey="id"
          pagination={{
            current: page,
            pageSize: per_page,
            total: total_count,
            onChange: onPageChange,
          }}
        />
      </Card>
    </div>
  );
};

export default Article;
